<template>
	<view class="usp_global_page">
		<view class="usp_global_page_container usp-container">
			<view class="banner-wrapper">
				<!-- <swiper-banner bannerId="{{swiperBannerId}}" class="banner"></swiper-banner> -->
			</view>
			<view class="tab-list">
				<view class="tab-item-wrapper" v-for="item in tabList">
					<view @click="changeTabBefore(item.code,item.name)" :class="{'tab-item': true, 'selected': activeCode === item.code}">
						<view>
							<image class="item-icon" :src="activeCode === item.code ? item.icon : item.iconUnselect"></image>
							<view class="item-name">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="appointment-wrap" v-show="activeCode=='maintain'">
				<Maintenance></Maintenance>

				<!-- <maintain :activeCode="activeCode" :addressList="addressList" :bindPhone="bindPhone" bindlogin="isLogin" bindselectProduct="showBrandPicker" catch:addresspickerstatuschange="childrenAddrPickerChangeHandler"></maintain> -->
			</view>
			<view class="appointment-wrap" v-show="activeCode=='install'">
				<Install></Install>
				<!-- <install :activeCode="activeCode" :addressList="addressList" :bindPhone="bindPhone" bindlogin="isLogin" bindselectProduct="showBrandPicker" catch:addresspickerstatuschange="childrenAddrPickerChangeHandler"></install> -->
			</view>
			<view class="appointment-wrap" v-show="activeCode=='moveMachine'">
				<!-- <moveMachine :activeCode="activeCode" :addressList="addressList" :bindPhone="bindPhone" bindlogin="isLogin" bindselectProduct="showBrandPicker" catch:addresspickerstatuschange="childrenAddrPickerChangeHandler"></moveMachine> -->
				<Relocation></Relocation>
			</view>
			<view class="link-list">
				<text @click="isCustomerShow" catch:tap="onShowOnlineService">在线客服</text>
			</view>
			<!-- <onlineService bind:close="onShowOnlineService" pageName="{{activeName+'页'}}" show="{{showOnlineService}}"></onlineService> -->
		</view>
		<customerService :customerShow="customerShow" @child-customer="isCustomer"></customerService>
	</view>
</template>

<script>
	import Install from './install/install.vue';
	import Maintenance from './maintenance/maintenance.vue';
	import Relocation from './relocation/relocation.vue';
	import customerService from '../../../components/customer-service/customer-service.vue';
	
	export default {
		components:{Install,Maintenance,Relocation,customerService},
		data() {
			return {
				customerShow:false,
				tabList: [
				  {
					code: 'install',
					name: '安装',
					icon: 'https://cs.midea.com/c-css/front/wechat/miniprogram-midea-one/appointment/install-select.png',
					iconUnselect: 'https://cs.midea.com/c-css/front/wechat/miniprogram-midea-one/appointment/install-unselect.png'
				  },
				  {
					code: 'maintain',
					name: '维修',
					icon: 'https://cs.midea.com/c-css/front/wechat/miniprogram-midea-one/appointment/maintain-select.png',
					iconUnselect: 'https://cs.midea.com/c-css/front/wechat/miniprogram-midea-one/appointment/maintain-unselect.png'
				  },
				  {
					code: 'moveMachine',
					name: '移机',
					icon: 'https://cs.midea.com/c-css/front/wechat/miniprogram-midea-one/appointment/move-machine-select.png',
					iconUnselect: 'https://cs.midea.com/c-css/front/wechat/miniprogram-midea-one/appointment/move-machine-unselect.png'
				  }
				],
				activeCode: 'maintain',
				activeName: '维修',
				addressList:"",
				bindPhone:""
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option)
			this.activeCode=option.code;
			this.activeName=option.name;
		},
		methods: {
			changeTabBefore(code,name){
				this.activeCode=code;
				this.activeName=name;
			},
			isCustomerShow(){
				this.customerShow=true;
			},
			isCustomer(){
				this.customerShow=false;
			}
		}
	}
</script>

<style>
	.usp_global_page {
	  display: -webkit-flex;
	  display: flex;
	  flex-direction: column;
	  height: 100vh;
	  justify-content: flex-start;
	}
	.usp_global_page .usp_global_page_container {
	  flex: 1;
	  overflow-y: auto;
	}
	page {
	  --brand-main-color--: #2c68ff;
	  --brand-normal-color--: #eaf1fe;
	  --brand-main-color-disabled--: #aac2ff;
	  --brand-normal-label-bg-color--: #eaf1fe;
	  --brand-linear-gradient-deep-color--: #ebf1ff;
	  --brand-linear-gradient-shallow-color--: #fafcff;
	  --text-title-color--: #24282f;
	  --text-subtitle-color--: #aaafb7;
	  --text-tips-color--: #aaafb7;
	  --text-placeholder-color--: #d5dadf;
	  --text-form-field-name-color--: #24282f;
	  --text-form-field-value-color--: #24282f;
	  --text-main-color--: #24282f;
	  --text-second-color--: #747981;
	  --text-normal-color--: #aaafb7;
	  --btn-border-normal-color--: #aaafb7;
	  --btn-border-radio-color--: #d5dadf;
	  --btn-border-radius--: 86px;
	  --btn-copy-bg-color--: #f0f0f0;
	  --page-bg-color--: #f2f6fc;
	  --page-form-bg-color--: #fff;
	  --page-form-border-radius--: 12px;
	  --line-divider-color--: #e9ecf0;
	  --text-or-input-bg-color--: #f2f6fc;
	  --block-bg-color--: #f0f6fd;
	  --success-main-color--: #00c382;
	  --success-normal-color--: #d5faee;
	  --warning-main-color--: #f5912f;
	  --warning-normal-color--: #fff1e4;
	  --fail-main-color--: #fa514b;
	  --fail-normal-color--: #ffe5e4;
	}
	.usp_global_page .usp-container {
	  background: var(--page-bg-color--);
	}
	.banner-wrapper {
	  padding: 0 12px;
	}
	.banner-wrapper .banner,
	.tab-list {
	  margin-top: 10px;
	}
	.tab-list {
	  align-items: center;
	  box-sizing: border-box;
	  display: -webkit-flex;
	  display: flex;
	  justify-content: space-between;
	  padding: 0 12px;
	  z-index: 10;
	}
	.tab-item-wrapper {
	  flex: 1;
	  padding-left: 12px;
	}
	.tab-item-wrapper:first-child {
	  padding-left: 0;
	}
	.tab-item {
	  align-items: center;
	  background: #e6ecf5;
	  border-radius: 8px;
	  color: var(--text-normal-color--);
	  display: -webkit-flex;
	  display: flex;
	  font-size: 16px;
	  height: 17.6vw;
	  justify-content: center;
	  position: relative;
	  text-align: center;
	  width: 100%;
	}
	.tab-item .item-icon {
	  display: block;
	  height: 30px;
	  margin: 0 auto;
	  width: 30px;
	}
	.tab-item .item-name {
	  color: var(--text-normal-color--);
	  font-size: 12px;
	  letter-spacing: 1px;
	  line-height: 17px;
	  margin-top: 2px;
	}
	.tab-item.selected {
	  background: #fff;
	  box-shadow:
		0 3px 9px 0 rgba(153, 161, 173, 0.16),
		0 3px 9px 0 rgba(153, 161, 173, 0.16);
	}
	.tab-item.selected .item-icon {
	  display: block;
	  height: 34px;
	  margin: 0 auto;
	  width: 34px;
	}
	.tab-item.selected .item-name {
	  color: var(--text-main-color--);
	  font-size: 14px;
	  font-weight: 700;
	  letter-spacing: 2px;
	  line-height: 22px;
	  margin-top: 1px;
	}
	.tab-item.selected .item-name-space1 {
	  letter-spacing: -1px;
	}
	.tab-item.selected::after {
	  border: 10px solid transparent;
	  border-radius: 2px;
	  border-top-color: #fff;
	  bottom: -17px;
	  content: '';
	  display: block;
	  height: 0;
	  left: 50%;
	  position: absolute;
	  transform: translateX(-50%);
	  width: 0;
	}
	.tabs-class {
	  position: fixed;
	  top: 0;
	  width: 100%;
	  z-index: 10;
	}
	.selector-class {
	  width: 100%;
	}
	.appointment-wrap {
	  overflow-x: hidden;
	  width: 100%;
	}
	.link-list {
	  font-size: 0;
	  padding: 10px 70px calc(100px + env(safe-area-inset-bottom));
	  text-align: center;
	}
	.link-list text {
	  box-sizing: border-box;
	  color: var(--brand-main-color--);
	  display: inline-block;
	  font-size: 14px;
	  text-align: center;
	  width: 33%;
	}
	.first {
	  border-right: 1px solid var(--brand-main-color--);
	}
	.install-tips-wrapper {
	  align-items: center;
	  display: -webkit-flex;
	  display: flex;
	  flex: 1;
	  justify-content: flex-end;
	  position: relative;
	}
	.finger-wrapper,
	.icon-finger {
	  display: inline-block;
	  position: relative;
	}
	.icon-finger {
	  height: 16px;
	  margin-right: 6px;
	  width: 20px;
	  z-index: 2;
	}
	.animation-circle {
	  border: 3px solid var(--brand-main-color--);
	  border-radius: 50%;
	  box-sizing: border-box;
	  height: 10px;
	  opacity: 0.8;
	  position: absolute;
	  right: -2px;
	  top: 18px;
	  width: 10px;
	  z-index: 1;
	}
	@-webkit-keyframes animationWave {
	  0% {
		border-width: 3px;
		opacity: 0.8;
		transform: scale(1);
	  }
	  40% {
		border-width: 0;
		opacity: 0;
		transform: scale(3);
	  }
	  100% {
		border-width: 3px;
		opacity: 0;
		transform: scale(1);
	  }
	}
	@keyframes animationWave {
	  0% {
		border-width: 3px;
		opacity: 0.8;
		transform: scale(1);
	  }
	  40% {
		border-width: 0;
		opacity: 0;
		transform: scale(3);
	  }
	  100% {
		border-width: 3px;
		opacity: 0;
		transform: scale(1);
	  }
	}
	.animation-wave,
	.animation-wave2 {
	  animation: animationWave 1.65s ease-in-out infinite;
	}
	.animation-wave2 {
	  animation-delay: 0.35s;
	}

</style>
